<template>
	<view class="c-section" :class="underline?'underline':''">
		<view class="icon"></view>
		<view class="title">
			{{title}}
		</view>
		<image v-if="action!==''" class="action" :src="'../../static/img/section/'+action+'.png'" @click="handleClick">
		</image>
	</view>
</template>

<script>
	export default {
		name: "c-section",
		props: {
			title: {
				type: String,
				required: true
			},
			underline: {
				type: Boolean,
				default: true
			},
			action: {
				type: String,
				default: '',
				validator(value) {
					return ['', 'close', 'clear', 'log'].indexOf(value) > -1;
				}
			}
		},
		methods: {
			handleClick() {
				this.$emit('click');
			}
		}
	}
</script>

<style lang="scss">
	.c-section {
		padding: 10rpx 24rpx;
		min-height: 52rpx;
		display: flex;
		align-items: center;
		margin-bottom: 10rpx;

		&.underline {
			border-bottom: solid 2rpx $uni-border-color;
		}

		.icon {
			height: 12px;
			background-color: #2979ff;
			border-radius: 10px;
			width: 4px;
		}

		.title {
			font-size: 26rpx;
			font-weight: bold;
			padding-left: 20rpx;
			flex: 1;
		}

		.action {
			width: 50rpx;
			height: 50rpx;
			cursor: pointer;
		}
	}
</style>
